* {margin: 0; padding: 0;}
body { font-family:"Microsoft Yahei"; color:#666; background:#fff;}
a{color:#5a5a5a;text-decoration:none;cursor:pointer}
a:hover,a:active{ color:#333; text-decoration:underline;outline:none}
ul {list-style: none;}
.clearfix:after{ content:'\20'; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{*zoom:1}
img { display:block; border:0;}
.hide { display:none;}
.pull-left{float: left;}
.pull-right{float: right;}
.container {position: relative;}

.top { width: 50vw; height:80px; margin: 0 auto;}
.top .logo { float:left; margin-top: 10px;}
.top .logo img { width:180px;}

.game-info{position: absolute;top: 27vw;width: 53vw;left: 23.5vw;text-align: center;}
.game-info .game-icon{width: 6vw;margin: 0 auto;}
.game-info .game-desc{width: 36vw;margin: 10px auto;}
.game-info .game-btn{width: 10vw;cursor: pointer;margin: 0 auto;}

.banner {position: absolute;top: 44vw;left: 18vw;width: 64vw;height: 24vw;}
.slideBox{overflow:hidden;position:absolute;top: calc(1vw + 17px);left: 4.8vw;width: calc(50vw - 10px);}
.slideBox .hd{ height:27px; overflow:hidden; position:absolute; right:5px; bottom:1vw; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.slideBox .hd ul li{ float:left; margin-right:24px;  width:27px; height:27px; line-height:27px; text-align:center; font-size:18px; background:#7dd4fa; cursor:pointer; color:#fff; }
.slideBox .hd ul li.on{ background: #2a7bdf; color:#eef9ff; }
.slideBox .bd{position:relative;z-index:0;}
.slideBox .bd li{height: calc(19vw - 5px); border-radius: 2vw;}
.slideBox .bd img{ width:100%; height: 100%; display:block;}
.slideBox .tempWrap {border-radius: 2vw;}

.game-box{position: absolute;top: calc(70vw - 10px);width: 54vw;left: calc(22.5vw - 10px);}
.game-box .game-news{width: 30vw;float: left;}
.game-news-tab {position: absolute;top: 5vw;width: inherit;height: 2vw;line-height: 2vw;}
.game-news-tab ul {display: flex;justify-content: center;text-align: center;font-size: 20px;font-weight: bold;}
.game-box .game-news .game-news-tab li {width: 33%; display: inline-block;cursor: pointer;}
.game-box .game-news .game-news-tab li.on {font-size: 0;}
.game-box .game-news .game-news-tab li:nth-child(1).on {background: url("../images/news-tab1.png") center center no-repeat;background-size: contain;}
.game-box .game-news .game-news-tab li:nth-child(2).on {background: url("../images/news-tab2.png") center center no-repeat;background-size: contain;}
.game-box .game-news .game-news-tab li:nth-child(3).on {background: url("../images/news-tab3.png") center center no-repeat;background-size: contain;}
.game-box .game-news .game-news-content ul {display: none;}
.game-box .game-news .game-news-content ul.on {display: block;width: 80%;margin-left: 10%;}
.game-news-content {position: absolute;top: 12vw;/* padding: 0 3vw; */width: inherit;}
.game-news-content li {height: 6vw;display: inline-block;vertical-align: bottom;font-size: .7vw;font-weight: bold;}

.game-box .game-role{width: 21vw;float: right;}
.game-role-tab {position: absolute;top: 3vw;width: inherit;z-index: 2;}
.game-role-tab ul li {width: 50%; cursor: pointer;}
.game-role-tab ul li img {visibility: hidden;}
.game-role-tab ul li:first-child {float: left; margin-left: -5px;}
.game-role-tab ul li:last-child {float: right; margin-right: -5px;}
.game-role-tab ul li.on img {visibility: initial;}

.game-role-img {position: absolute;top: 4vw;width: inherit;}
.game-role-img ul li {display: none; width: 100%;}
.game-role-img ul li.on {display: inline-block;}

/* footer */
.footer { background:#fff;}
.footer .content { width:1100px; margin:0 auto; padding:30px 0 30px 0;}
.footer p { line-height:2em; text-align: center;}
.footer span { margin-right:20px;}
.footer a { color:#1f81dd;}
.footer a:hover { color:#1f81dd;}

p#back-to-top{position:fixed;bottom:100px;right:80px;}
p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:80px;-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s;}
p#back-to-top a:hover{color:#979797;}
p#back-to-top a span{background: url("../images/backtop.png") no-repeat center center;border-radius:6px;display:block;height:123px;width:130px;margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
#back-to-top a:hover span{background: url("../images/backtop.png") no-repeat center center;}

/*闪烁动画*/
@keyframes flashing{
    0%{width: 10vw;left: 45vw;}
    50%{width: 12vw;left: 44vw;}
    100%{width: 10vw;left: 45vw;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes flashing {
    0%{width: 10vw;left: 45vw;}
    50%{width: 12vw;left: 44vw;}
    100%{width: 10vw;left: 45vw;}
}
@-moz-keyframes flashing {
    0%{width: 10vw;left: 45vw;}
    50%{width: 12vw;left: 44vw;}
    100%{width: 10vw;left: 45vw;}
}
@-ms-keyframes flashing {
    0%{width: 10vw;left: 45vw;}
    50%{width: 12vw;left: 44vw;}
    100%{width: 10vw;left: 45vw;}
}
@-o-keyframes flashing {
    0%{width: 10vw;left: 45vw;}
    50%{width: 12vw;left: 44vw;}
    100%{width: 10vw;left: 45vw;}
}

/* 定义flashing类*/
.flashing{
    animation: flashing 0.5s linear infinite;
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: flashing 0.5s linear infinite;
    -moz-animation: flashing 0.5s linear infinite;
    -ms-animation: flashing 0.5s linear infinite;
    -o-animation: flashing 0.5s linear infinite;
}
